import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './RenderTreeTitle.less';
import { FormControl, Button, Row, Col, Popconfirm} from 'tinper-bee';
import AddTreeNode from './AddTreeNode.jsx';
import { vendorsDanger as danger, vendorsSuccess as success } from 'utils/config.js';

export default class RenderTreeTitle extends Component {
	constructor(props){
		super(props);
		this.state={
			item: this.props.item,
			oldSname: this.props.callbackItem.sname === undefined ?
						this.props.item.sname :
						this.props.callbackItem.name,
			show: false,
			editStatus: true,
			isEnd: this.props.item.pkParent != null ? false : true,
			isTop: this.props.item.pkParent == null ? false : true, // 判断是否为顶层树节点，决定是否展示添加同级按钮
			isSameLevel: false // 是否添加同级
		};
	}
	componentWillReceiveProps (nextProps) {
		let _me = this;
		this.setState({
			item: nextProps.item
		});
	}
	// 添加子级
	createRender = (item, node) => {
		let onCreate = this.props.onCreateRender;
		onCreate(item, true, this.state.item);
		this.setState({
			show: true,
			isSameLevel: false
		});
	}
	// 添加同级
	createSameLevel = (item) => {
		let onCreate = this.props.onCreateSameLevel;
		onCreate(item, true);
		this.setState({
			show: true,
			isSameLevel: true
		});
	}
	editRender = (item) => {
		let onEdit = this.props.onEditRender;
		onEdit(item, true);
		this.setState({
			editStatus: false
		})
	}
	deleteRender = (item) => {
		let onDelete = this.props.onDeleteRender;
		onDelete(item);
	}
	nodeChange = (e) => {
		let _me = this;
		let item = this.state.item;
		if (e.target.value.length > 50) {
			danger({'text': '请限制在50个字符之内！'});
			item['name'] = e.target.value.substring(0,50);
		} else {
			item['name'] = e.target.value;
		}
		this.setState({
			item: item
		});
	}
	close = () => {
		let	onClose = this.props.onCloseAddTreeNode;
		onClose();
		this.setState({
			show: false
		});
	}
	onEditCancel = () => {
		let onEditCancel = this.props.onEditCancel;
		onEditCancel(false);
		let oldSname;
		if(this.props.callbackItem.sname === undefined){
			oldSname = this.props.item.sname;
		} else {
			oldSname = this.props.callbackItem.name;
		}
		this.state.item['name'] = oldSname;
		this.setState({
			editStatus: true
		})
	}
	onEditconfirm = () => {
		let onEditConfirm = this.props.onEditConfirm;
		onEditConfirm(this.state.item, false);
		this.setState({
			editStatus: true
		})
	}
	onAdd = (data, level, item , callback) =>{
		let onAdd = this.props.onAdd;
		onAdd(data, level, item, callback);
	}
	render () {
		let titleIcon, titleInfo, addNode;
		if (this.props.editKey == this.state.item.key) {
			titleInfo = 
				<div className="input-group fl clearfix">
					<input type="text" id="itemKey" disabled className="code fl input-border-format" defaultValue={this.state.item.key} onChange={(e) => this.nodeChange(this.state.item,e.target.value, 'key')}/>
					<input type="text" id="itemKey" className="name fl input-border-format" defaultValue={this.state.item.name} value={this.state.item.name} onChange={this.nodeChange}/>
					<span className="confirm fl" onClick={this.onEditconfirm}></span>
					<span className="cancel fl" onClick={this.onEditCancel}></span>
				</div>
		} else {
			titleInfo = <div className={this.state.item.className ? 'text clearfix fl item-bg': 'text clearfix fl '}  style={this.state.show? {width:'100%'}:{}}>
							{!this.state.item.childReason && <i className="point fl"></i>}
							<span className="title-middle fl">{this.state.item.key} </span>
							<span className="title-middle fl">&nbsp;{this.state.item.name}</span>
						</div>
		}
		if (this.props.isHover == this.state.item.key && this.state.editStatus) {
			titleIcon = <div className="clearfix base-btn fl">
					{this.state.isTop && <span className="create-same fl" title="添加同级"  onClick={(e)=>this.createSameLevel(this.state.item)}></span> }
					{this.state.isEnd && <span className="create fl" title="添加子级"onClick={(e)=>this.createRender(this.state.item)}></span> }
					<span className="edit fl" title="编辑" onClick={(e)=>this.editRender(this.state.item)}></span>
					<Popconfirm trigger="click" placement="top" content="你确定删除该项目吗？" onClose={(e)=>this.deleteRender(this.state.item)}>
						<span className="delete fl" title="删除"></span>
                	</Popconfirm>
					</div>
		}
		if (this.state.show) {
			addNode = <AddTreeNode onClose={this.close}
								   onAdd={this.onAdd}
								   level={this.props.isPos.length == 2 ? 'second': 'third'}
								   posLength={this.props.isPos.length}
								   className="pos"
								   isSameLevel={this.state.isSameLevel}
								   item={this.state.item}></AddTreeNode>
		}
		return(
			<div className="title-con clearfix">
				{titleInfo}
				{this.state.show ? '' : titleIcon}
				{this.state.show ? addNode: ''}
			</div>
		)
	}
}

RenderTreeTitle.PropTypes={
	
};